<template>
	<view class="address">
		<gyd-navbar back-color="#fff">
			<template #default>
				<uni-easyinput v-model="keyword" placeholder="输入联系人姓名/电话" :clearable="false"
					@input="search"></uni-easyinput>
			</template>
		</gyd-navbar>

		<view class="address-list">
			<view class="address-item" v-for="(item,index) in addressList" :key="index" @click="selectAddress(item)">
				<view class="user">
					<text class="name">{{item.consignee}}</text>
					<text class="phone">{{item.mobile}}</text>
				</view>
				<view class="area">{{item.format_address}}</view>
				<view class="actions-bar">
					<!-- <view class="is-default active" v-if="item.is_default==1" @click.stop="onChange(item,index)">
						<hi-icons type="radio-checked" color="#1A79F9"></hi-icons>
						<text class="label">默认</text>
					</view>
					<view class="is-default" v-if="item.is_default===0" @click.stop="onchange(item,index)">
						<hi-icons type="radio-unchecked" color="#CACDCD"></hi-icons>
						<text class="label">默认</text>
					</view> -->
					<u-switch v-model="item.is_default" @change="changeDefault(item.id)"></u-switch>
					<view class="btn-group">
						<u-button class="btn" type="error" size="mini" @click="delAddress(item.id)">删除</u-button>
						<u-button class="btn" type="success" size="mini"
							@click="pageRoute('/pages/address/form?id=' + item.id)">修改</u-button>
					</view>
				</view>
			</view>
			<view class="empty-data" v-if="addressList.length===0">暂无地址</view>
		</view>

		<view class="footer">
			<view class="btn-group">
				<u-button class="btn" type="primary" size="large"
					@click="pageRoute('/pages/address/form')">新建地址</u-button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import util from '@/utils/util';
	import {
		ref,
		reactive,
		toRefs,
		inject,
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';

	const state = reactive({
		title: '地址管理',
		themeColor: cache.get('themeColor'),
		imgHost: util.requestUrl(),
		keyword: '',
		isMore: true,
		addressList: [],
	});

	//在页面所有元素加载完成后执行（只执行一次）
	onLoad((opt) => {
		console.log('onLoad');
		if (opt.hasOwnProperty('id')) {
			console.log('传递参数', opt.id);
		}
		getAddressList();
	});

	//在页面由不可见变为可见时执行（只要页面显示都会执行）
	onShow(() => {
		console.log('onShow');
	})

	//在页面解析完成之后执行
	onReady(() => {
		console.log('onReady');
	})

	onPullDownRefresh(() => {
		console.log('下拉刷新');
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
	})

	onReachBottom(() => {
		console.log('触底加载更多');
	})

	function getAddressList() {
		state.addressList = [{
			id: 1,
			consignee: '王云海',
			mobile: '15825258992',
			format_address: '云南省昆明市盘龙区金辰街道盛唐城E10栋2507',
			is_default: true
		}, {
			id: 2,
			consignee: '王先生',
			mobile: '18187058913',
			format_address: '云南省昆明市盘龙区',
			is_default: false
		}];
	}

	function search() {
		console.log('搜索', state.keyword);
	}

	function selectAddress(item) {
		console.log('选择地址', item);
	}

	function changeDefault(id) {
		console.log('修改默认', id);
	}

	function delAddress(id) {
		console.log('删除地址', id);
	}

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	}

	function pageTabRoute(url) {
		uni.reLaunch({
			url
		});
	}

	const {
		title,
		themeColor,
		imgHost,
		keyword,
		isMore,
		addressList,
	} = toRefs(state);
</script>

<style lang="scss">
	.address {
		padding-bottom: calc(100rpx + env(safe-area-inset-bottom));

		.address-list {
			padding: $m12 $m12 0;

			.address-item {
				margin-bottom: $m12;
				padding: $m24;
				background-color: #fff;
				border-radius: $radius-16;

				.user {
					font-size: $font-32;
					color: $main-color;
					font-weight: bold;

					.phone {
						margin-left: $m32;
					}
				}

				.area {
					margin-top: $m8;
					text-align: justify;
					font-size: $font-24;
					color: $tips-color;
				}

				.actions-bar {
					@include f-between($align: center);

					.is-default {
						@include f-center;

						&.active {
							.label {
								color: $primary-color;
							}
						}

						.label {
							line-height: 1;
							font-size: $font-24;
							color: $tips-color;
						}
					}

					:deep(.hi-button) {
						margin-left: $m24;
					}

					.btn-group {
						display: flex;

						.btn {
							margin-left: 10rpx;
						}
					}
				}
			}
		}

		.footer {
			position: fixed;
			/* 固定在底部 */
			bottom: 0;
			width: 100%;

			.btn-group {}
		}
	}
</style>